<template>
  <view style="display: flex">
    <view class="money-contnt" :style="{ paddingLeft: '20rpx', paddingTop: props.data.isExpire?'70rpx':'50rpx', textAlignLast: 'center' }">
      <view>
        <image style="width: 23rpx; height: 26rpx;" src="https://img.qumoyugo.com/img/WMMDLCJHDI7YX8NSH6I41688952210007.png"></image>
        <span class="money">{{ props.data.couponMoney }}</span>
      </view>
      <view class="effective" v-if="!props.data.isExpire">即将过期</view>
    </view>
    <view class="detail">
      <view class="name">{{ props.data.couponName }}</view>
      <view style="display: flex; margin-top: 22.22rpx;">
        <view class="time">有效期至：{{ props.data.effectiveDate }}</view>
        <view class="button" @click="gotoPage(props.url)">
          立即使用
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  url: {
    type: String,
    default: () => ''
  }
})

// 立即使用
const gotoPage = (url) => {
  if (url.indexOf('pages/eventsList') === -1) {
    uni.navigateTo({
      url
    })
  } else {
    uni.switchTab({
      url
    })
  }
}
</script>

<style scoped lang="scss">
.money-contnt {
  width: 220.14rpx;

  .money {
    height: 52rpx;
    font-size: 69rpx;
    font-weight: 500;
    color: #333333;
    line-height: 48rpx;
    margin-left: 5.56rpx
  }
  .effective {
    height: 22rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
    line-height: 20rpx;
    margin-top: 21.53rpx
  }
}
.detail {
  margin-left: 22.22rpx;
  margin-top: 58.33rpx;

  .name {
    height: 31rpx;
    font-size: 31rpx;
    font-weight: bold;
    color: #333333;
    line-height: 24rpx;
  }
  .time {
    height: 20rpx;
    font-size: 21rpx;
    font-weight: 400;
    color: #999999;
    line-height: 20rpx;
    margin-top: 13.89rpx
  }
  .button {
    margin-left: 97.92rpx;
    width: 139rpx;
    height: 56rpx;
    background: #E9EDFF;
    border-radius: 28rpx;
    font-size: 21rpx;
    font-weight: bold;
    color: #333333;
    text-align: center;
    line-height: 56rpx;
  }
}
</style>
